<!DOCTYPE HTML>
<html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
  <head>
    <title>Example page</title>
    <link rel="stylesheet" href="/styles/base_css_ltr.css" />
    <link rel="stylesheet" href="/styles/explore.css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td style="height: 67px;">
          <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td width="100%">
                <div class="kd-googlebar">
                  <div style="float:left;">
                    <a class="logo">
                      <img src="/images/logo_Google_BITE.png"
                           style="width:104px;">
                    </a>
                  </div>
                  <div id="baseHeader" style="float:left;"></div>
                  <div id="topRow" style="float:right; margin-right:44px;"></div>
                  <div class="kd-butterbar" id="statusMessageDiv">
                    <p id="statusMessage"></p>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <div id="baseView">
            <table width="100%">
              <tr>
                <td>button</td>
                <td>
                  <input type="button" onclick="changeColor();"
                         value="change color">
                </td>
              </tr>
              <tr>
                <td>radio button</td>
                <td>
                  <input type="radio" name="radio-buttons" value="1">
                  <input type="radio" name="radio-buttons" value="2">
                </td>
              </tr>
              <tr>
                <td>checkbox</td>
                <td>
                  <input type="checkbox">
                </td>
              </tr>
              <tr>
                <td>selection</td>
                <td>
                  <select>
                    <option>Google+</option>
                    <option>Chrome</option>
                    <option>Android</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>input box</td>
                <td>
                  <input type="text" id="text">
                  <input type="button" onclick="displayText('text', 'display-area-1');"
                         value="show">
                  <div id="display-area-1" style="display:inline;"></div>
                </td>
              </tr>
              <tr>
                <td>text area</td>
                <td>
                  <textarea id="textarea"></textarea>
                  <input type="button" onclick="displayText('textarea', 'display-area-2');"
                         value="show">
                  <div id="display-area-2" style="display:inline;"></div>
                </td>
              </tr>
              <tr>
                <td>mouse over</td>
                <td>
                  <input type="button" onmouseover="showMouseOverMessage();"
                         value="mouse over">
                  <div id="display-area-3" style="display:inline;"></div>
                </td>
              </tr>
              <tr>
                <td>verification</td>
                <td>
                  <span style="font-weight:bold;">verify this</span>
                </td>
              </tr>
              <tr>
                <td>link</td>
                <td>
                  <a href="http://www.google.com" target="_blank">
                    open a new tab
                  </a>
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </body>
  <script language="javascript">
    function changeColor() {
      if (!document.body.style.backgroundColor) {
        document.body.style.backgroundColor = '#f3f3f3';
      } else {
        document.body.style.backgroundColor = '';
      }
    }

    function displayText(input, display) {
      var text = document.getElementById(input).value;
      document.getElementById(display).innerHTML = text;
    }

    function showMouseOverMessage() {
      document.getElementById('display-area-3').innerHTML = 'This will disappear soon.';
      setTimeout('clearMouseOverMessage();', 500);
    }

    function clearMouseOverMessage() {
      document.getElementById('display-area-3').innerHTML = '';
    }
  </script>
</html>
